<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>全民快送</title>

    <!-- Bootstrap -->
    <link href="${base}/${resources}/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<#include "header.html"/>
<div class="container-fluid">
    <ul class="nav nav-tabs" id="orderTabs">
        <li role="presentation" class="active"><a id="#unfinishOrder" href="#unfinishOrder">未完成订单</a></li>
        <li role="presentation"><a id="#finishedOrder" href="#finishedOrder">已完成订单</a></li>
    </ul>
    <div  class="tab-content">
        <div id="unfinishOrder" class="tab-pane active">
            <table id="unfinishOrderTable" class="table">
                <thead>
                <tr>
                    <th>物品名称</th>
                    <th>收货人</th>
                    <th>发货时间</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div id="finishedOrder" class="tab-pane">
            <table  id="finishedOrderTable" class="table">
                <thead>
                <tr>
                    <th>物品名称</th>
                    <th>收货人</th>
                    <th>发货时间</th>
                    <th>收货时间</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${base}/${resources}/js/jquery-2.0.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${base}/${resources}/js/bootstrap.min.js"></script>
<script src="${base}/${resources}/js/jquery.json-2.4.js"></script>
<script src="${base}/${resources}/js/wechat.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        var uid = ${uid};
        $("#navTitle").text("我的订单");
        $("#orderTabs a:first").tab("show");
        $("#orderTabs a").click(function(e){
            e.preventDefault();//阻止a链接的跳转行为
            $(this).tab('show');//显示当前选中的链接及关联的content
            var id = this.id;
            if(id == "#unfinishOrder"){
                loadUnfinishOrder();
            }else{
                loadFinishedOrder();
            }

        });
        //加载未完成订单
        loadUnfinishOrder();

    });

    var statusJson = {0:""}

    function loadUnfinishOrder(){
        $.ajax({
            type:"POST",
            contentType:"application/json;charset=utf-8",
            url:"${base}/order/unfinish",
              data: $.toJSON( {"uid":uid}),
            success:
                function(data){

                    if(data.resultCode == 0){
                        var html = "";

                        $.each(data.page.rows,function(index,item){
                            html += "<tr>"
                                    +   "<td>"+item.name+"</td>"
                                    +   "<td>"+item.receiver+"</td>"
                                    +   "<td>"+new Date(item.pickupTime).format("yyyy-MM-dd")+"</td>"
                                    +   "<td>"+item.statusStr+"</td>"
                                    +  "</tr>";


                        });

                        $("#unfinishOrderTable tbody").empty().append(html);
                    }



                },
            dataType:"json"});

    }

    function loadFinishedOrder(){
        $.ajax({
            type:"POST",
            contentType:"application/json;charset=utf-8",
            url:"${base}/order/finished",
            data: $.toJSON( {"uid":uid}),
            success:
                    function(data){
                        if(data.resultCode == 0){
                            var html = "";

                            $.each(data.page.rows,function(index,item){
                                html += "<tr>"
                                    +   "<td>"+item.name+"</td>"
                                    +   "<td>"+item.receiver+"</td>"
                                    +   "<td>"+new Date(item.pickupTime).format("yyyy-MM-dd")+"</td>"
                                    +   "<td>"+new Date(item.endTime).format("yyyy-MM-dd")+"</td>"
                                    +  "</tr>";


                            });

                            $("#finishedOrderTable tbody").empty().append(html);
                        }


                    },
            dataType:"json"});
    }

</script>
</body>
</html>